<template>
	<div class="container">
		<h2>查看委托人</h2>
		<a-descriptions title="单位基本信息" bordered size="middle" :label-style="{width: 100 +'px'}" :content-style="{width: 200 +'px'}">
			<a-descriptions-item label="单位名称">{{ formState.parent_user?.company_name }}</a-descriptions-item>
			<a-descriptions-item label="法人名称">{{ formState.parent_user?.legal_person }}</a-descriptions-item>
			<a-descriptions-item label="联系电话">{{ formState.parent_user?.mobile }}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions style="padding-top: 10px;" title="委托人基本信息" bordered size="middle" :label-style="{width: 100 +'px'}" :content-style="{width: 200 +'px'}">
			<a-descriptions-item label="姓名">{{ formState.fullname }}</a-descriptions-item>
			<a-descriptions-item label="账户状态">{{ formState.status === 1? '正常' : '冻结' }}</a-descriptions-item>
			<a-descriptions-item label="联系电话">{{ formState.mobile }}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions style="padding-top: 10px;" title="绑定项目" bordered size="middle" :label-style="{width: 100 +'px'}" :content-style="{width: 200 +'px'}">
			<template v-for="(item, index) in formState.departments" :key="index">
				<a-descriptions-item label="项目"><a-badge :status="now >= item.UserDepartment?.start_validity && now <= item.UserDepartment?.end_validity ? 'success' : 'default'" />{{ item.name }}</a-descriptions-item>
				<a-descriptions-item label="授权有效期">{{ item.UserDepartment?.start_validity }} ~ {{ item.UserDepartment?.end_validity }}</a-descriptions-item>
				<a-descriptions-item label="委托书"><a :href="item.UserDepartment?.entrust_file_path" target="_blank">委托书</a></a-descriptions-item>
			</template>
		</a-descriptions>
		<a-descriptions style="padding-top: 10px;" title="更新信息" bordered size="middle" :label-style="{width: 100 +'px'}" :content-style="{width: 200 +'px'}">
			<a-descriptions-item label="更新人">{{ formState.departments?.[0].UserDepartment?.oprUser.fullname }}</a-descriptions-item>
			<a-descriptions-item label="更新时间">{{ formState.departments?.[0].UserDepartment?.create_time }}</a-descriptions-item>
			<a-descriptions-item></a-descriptions-item>
		</a-descriptions>
		<a-form ref="formRef" :label-col="{ style: { width: '80px' } }" :model="formState" layout="vertical">
			<a-row :gutter="20">
				<a-col :span="24" class="py-4 text-center">
					<a-space>
						<a-button @click="closeTab('/consignor')">
							<close-outlined />关闭
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-form>
	</div>
</template>
<script setup>
import { computed, getCurrentInstance, inject, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import {
	CloseOutlined, DeleteOutlined,
	DeliveredProcedureOutlined,
	ImportOutlined,
	LoadingOutlined,
	SaveOutlined
} from "@ant-design/icons-vue";
import { post, get } from "@/utils/index.js";
import { baseURL } from "@/utils/request.js";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const route = useRoute();
const fileUploading = ref(false);
const id = computed(() => {
	return route.params.id || 0;
});
const formRef = ref();
const formState = ref({
	projects: [],
});
const now = dayjs().format('YYYY-MM-DD')
const projectOptions = ref([]);
post("department/projects?type=3", { page_size: 1000 }).then(({ data }) => {
	projectOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const supplierOptions = ref([]);
post("user", { is_supplier: 1, page_size: Infinity }).then(({ data }) => {
	supplierOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.company_name || d.mobile,
		};
	});
});

onMounted(async () => {
	const cacheData = localStorage.getItem("consignor-save");
	formState.value = JSON.parse(cacheData) || formState.value;
	if (id.value) {
		await get("user/info", { id: id.value }).then(data => {
			delete data.password;
			formState.value = data;
			formState.value.projects = [];
			for (const department of data.departments) {
				formState.value.projects.push({
					project_id: department.id,
					is_permanent: department?.UserDepartment?.is_permanent,
					date_range: department?.UserDepartment?.is_permanent ? []
						: [department.UserDepartment.start_validity, department.UserDepartment.end_validity],
					entrust_file_path: [
						{
							name: '委托书',
							url: department.UserDepartment.entrust_file_path,
						}
					]
				})
			}
		})
	}
})
const closeTab = inject("closeTab");
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
  h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 20px;
  }
}
:deep(.ant-table-cell) .ant-form-item {
  margin-bottom: 0;

  .ant-form-item-explain {
    position: absolute;
    bottom: -24px;
  }
}

.cache-btn {
  background-color: #0d9424;
  color: #fff;
}
</style>